<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 7.11 (457846)"/><meta name="author" content="tian18840876830@163.com"/><meta name="created" content="2018-07-03 14:42:21 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2019-07-31 09:54:13 +0000"/><title>day21_Gulp</title></head><body style="zoom: 1.75;"><div><span style="font-size: 18px; font-weight: bold;">学习目标：</span></div><div>1.Gulp的介绍 </div><div>2.Gulp的安装</div><div>3.Gulp的应用</div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">Gulp的介绍</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><a href="https://www.gulpjs.com.cn/" style="font-family: Monaco;"><font color="#0433FF" style="font-family: Monaco; font-size: 14px;">https://www.gulpjs.com.cn/</font></a></div><div><span style="color: rgb(79, 79, 79); font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><font style="font-size: 14px;">Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。 </font></span></div><div><span style="color: rgb(79, 79, 79); font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><font style="font-size: 14px;">使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。</font></span><span style="color: rgb(79, 79, 79); font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun; font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"> </span></div></div><div><br/></div><div><img src="day21_Gulp.html.resources/3033F6F7-960D-42B4-AF46-6300A596F071.png" height="540" width="840"/><br/></div><div><br/></div><div>普通开发  css -&gt; min.css</div><div>                 Js  -&gt; min.js</div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">一、安装node.js</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">注意先要安装</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">node.js</span> <span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">安装</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">node.js</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">一路下一步就好了</span></div><div style="font-size: 14px;"><a href="https://nodejs.org/en/" style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 255); font-family: Monaco; text-decoration: underline;">https://nodejs.org/en/</a></div><div style="font-size: 14px;"/><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">安装</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp </span> <span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">mac</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">版本下安装</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span></div><div style="font-size: 14px;"><font color="#03BA0A"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp -g</span></font></div><div style="font-size: 14px;"/><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">windows</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中直接省略</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sudo</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">进行安装就可以了</span></div><div style="font-size: 14px;"/><div style="font-size: 14px;"/><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">【注】如果大家使用npm下载插件的时候，发现下载不下来，我们需要npm换成国内的淘宝源。</span></div><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">     接下来所有npm开头的命令，大家都需要换成 cnpm命令。</span></div><div style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">【注】只要开始使用cnpm的命令了，就必须都使用cnpm的名字。</span></div><div style="font-size: 14px;"><div><br/></div></div><div><font color="#FF2600" face="Monaco" style="font-size: 18px;"><span style="-webkit-text-stroke-color: rgb(255, 255, 255);"><b>点开始键，选项下node.js的安装目录，下选项 start node</b></span></font></div><div><br/></div><div><font color="#FF2600" face="Monaco" style="font-size: 18px;"><span style="-webkit-text-stroke-color: rgb(255, 255, 255);"><b>点开开始键windows，cmd，敲回车。配置node.js环境变量。</b></span></font></div><div><br/></div><div><font color="#FF2600" face="Monaco" style="font-size: 18px;"><span style="-webkit-text-stroke-color: rgb(255, 255, 255);"><b>C:</b></span></font></div><div><span style="font-size: 18px; color: rgb(255, 38, 0); font-family: Monaco;"><b>D:</b></span></div><div><font color="#FF2600" face="Monaco"><span style="font-size: 18px;"><b>window电脑的同学，要先切换盘符，再去进入建立好的文件夹</b></span></font></div></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div>SEO  搜索关键字</div><div>linux命名</div><div><font face="Monaco">cd  路径  进入你磁盘中的某一个文件夹</font></div></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">二、Gulp项目的创建</span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">2.1</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#00960E">npm init</font></span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">初始化</span></font></div></div><div><img src="day21_Gulp.html.resources/DC2BC4E2-5608-40E5-A389-095E947E70F5.png" height="240" width="817"/><br/></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div>/*</div><div>      ^  保留第一位版本号，后面两位版本找最新的</div><div>      ~  保留前两位版本号，最后一位找最新的</div><div>         就是下载这个版本的gulp</div><div>    */</div></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">2.2</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">现在我们可以使用 </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600">package.json</font></span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">进行</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的配置</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果要使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">需要在工程目录下重新安装</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">使用命令</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(0, 183, 13);">npm install gulp --save-dev</font></span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(0, 183, 13);">               npm i gulp -D</font></span></font></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco; color: #00b70d; font-size: 12px;">--save-dev 将gulp安装的信息保存packpage.json</span></font></div></div><div><img src="day21_Gulp.html.resources/A0E690C4-1C66-4FB8-A96F-83E047C65509.png" height="251" width="314"/><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">2.3</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果你想删除</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">node_modules</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">目录</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以使用命令</span></font></div><div><font color="#00A70E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">rm -rf node_modules/</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">删除以后，我们可以使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600">package.json</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中之前设置好的依赖继续进行安装</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#00A50E">npm install</font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">   (</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就不需要输入后面的那些命令了</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这样我们就建好了一个项目</span></font></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">二、使用Gulp创建任务</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">使用</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">gulp</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">创建任务</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco; color: rgb(255, 38, 0);">gulpfile.js</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">  </span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">这个</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">js</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">文件是我们</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">gulp</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">非常重要的配置文件</span></font></div><div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">配置完这个文件</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">我们就可以使用</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">gulp</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">了</span></font></div></div><div><img src="day21_Gulp.html.resources/6A43D25A-DBAD-4A6A-AC3E-77D5F5831F5D.png" height="155" width="788"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在根目录下新建一个</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件</span> <font color="#FF2600"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">gulpfile.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">  </span></font></font></div></div><div><img src="day21_Gulp.html.resources/D4E323D5-8A44-4E6B-8A9F-6BB33BC30CDE.png" height="308" width="709"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在命令行中输入</span> <b><font color="#00B20E"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">gulp</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">任务名</span></font></b><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">， <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">当然我们可以设置默认任务</span></span></font></div></div><div><img src="day21_Gulp.html.resources/F49EA051-6243-4DEC-A8CB-009CDDAD6F9A.png" height="150" width="635"/><br/></div><div><img src="day21_Gulp.html.resources/95496E6F-52E8-4CA5-B627-6A0C891E8D2B.png" height="193" width="635"/><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">三、Gulp具体的一些功能</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#03B80A" style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">gulp.src().pipe(gulp.dest())</span></font></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">这个章节我们实现</font></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">两个功能</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">  </span><font color="#FF40FF"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 251, 0); font-family: Monaco;">1</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 251, 0); font-family: Monaco;">、读取将要处理的文件</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 251, 0); font-family: Monaco;">  2</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 251, 0); font-family: Monaco;">、把处理好的文件放在指定地方</span></font></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(0, 249, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">gulp.src</span><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">   </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以给我们找出需要处理的源文件</span></font></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(0, 249, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">pipe</span> <font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">     </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">来处理找出的文件</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">pipe</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以理解为管道</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">  </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">每一个管道我们都可以指定任务去处理</span></font></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(0, 249, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">gulp.dest</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">最后通过这个命令将处理好的文件放在指定的地方</font></span></font></div><div><font color="#000000" style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">完成一个文件的拷贝，我们可以通过上述命令完成</span></font></div><div><font color="#03BA0A" style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">return gulp.src('index.html').pipe(gulp.dest('dist'));</span></font></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">四、Gulp实现index.html的拷贝</span></span></div><div><img src="day21_Gulp.html.resources/526AE4D5-7D9B-441C-BF57-A7585632D1DD.png" height="105" width="960"/><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">五、Gulp实现图片的拷贝</span></div><div><img src="day21_Gulp.html.resources/CC3B4CC9-4B91-45EB-BE79-F529B9CAA0A0.png" height="309" width="940"/><br/></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">六、Gulp实现两个文件夹拷贝到一个目标文件夹中</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面我们来看一下如何将两个文件夹中的内容拷贝到一个目标文件夹中</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面我们来创建多任务文件夹拷贝</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在我们日常开发中还可能有一些特殊的需求</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">比如，我们在拷贝文件的时候，可以排除一些文件</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">通过数组将这两个文件写在一起</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在前面加</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">!</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以过滤掉这个文件，使这个文件不被拷贝</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#FF40FF" style="font-size: 14px;">return gulp.src(['xml/*.xml', 'json/*.json', '!json/secret.json']).pipe(gulp.dest('dist/data'));</font></span></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">七、Gulp一次性执行多个任务</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上述我们通过三个任务完成了拷贝工作，那么我们通过什么方式可以一次性执行上述三个任务呢</span></font></div></div><div><img src="day21_Gulp.html.resources/7FDD3A04-1080-459A-B2A2-3A0A8FBAE7A3.png" height="121" width="934"/><br/></div><div><br/></div><div> </div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">八、Gulp的监听</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">除了上述文件拷贝的功能以外，我们还可以通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">去监听工程中文件的变化</span></font></div></div><div><img src="day21_Gulp.html.resources/FA529611-AD92-4516-ABBF-7C7041FCE167.png" height="199" width="940"/><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">九、Gulp的插件</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面我们来看一下</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">插件的入门操作</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">本身没有什么特别的功能</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">只能读取文件、监视文件</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们可以通过</span><font color="#FF2600"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">插件来拓展</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">的功能</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600"> </font><font color="#000000"> </font></span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">比如</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们可以通过插件</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">遍历</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">less</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">或者</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以将很多文件拼合在一起进行压缩、还可以优化图片的尺寸</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">关于</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">插件，我们可以去访问</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">相关的插件网站</span></font></div><div><a href="http://www.gulpjs.com/plugins/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco; color: rgb(4, 181, 10);"><font color="#04B50A" style="font-size: 14px;">www.gulpjs.com/plugins/</font></a></div></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十、使用gulp-scss编译css文件</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们想要通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">去编译</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">scss</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件成</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">css</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">  </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们可以安装</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp-scss</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">插件</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">通过下述命令</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">进行安装</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"> </span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#00960E" style="font-size: 14px;">sudo npm install gulp-sass —-save-dev</font></span></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">安装好以后</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们就可以使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gulp-sass</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">编译文件了</span></font></div><div><span style="font-family: Monaco;"><font color="#FF2600" style="font-size: 18px;"><b>【注】注意如果使用的是windows系统，请使用<a href="https://www.npmjs.com/package/gulp-sass-china/" style="font-family: Monaco; color: rgb(255, 38, 0);" title="Install">g</a>ulp-sass</b></font></span></div></div><div><img src="day21_Gulp.html.resources/B15817E8-94C9-47B1-BCF7-B1C93FA9AAE6.png" height="157" width="960"/><br/></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十一、gulp-connect来启动一个服务器</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">我们可以通过</font></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">gulp-connect</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">来启动一个服务程序</font></span></font></div><div><font color="#07AC0B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp-connect --save-dev</span></font></div></div><div><img src="day21_Gulp.html.resources/A357C218-4D99-4349-AA91-5704083860F7.png" height="215" width="960"/><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十二、gulp-concat合并文件</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#07A80C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp-concat --save-dev</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在这里我们将两个</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件进行合并</span></font></div></div><div><img src="day21_Gulp.html.resources/35163D72-9A8D-465E-88EC-52277AF9A47E.png" height="175" width="960"/><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十三、gulp-uglify文件压缩</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面我们来实现一下文件的压缩</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们先安装插件</span></font></div><div><font style="font-size: 14px; color: rgb(6, 174, 11);"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp-uglify --save-dev</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">引入插件以后，我们不需要新建任务啦</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">,</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">直接在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">scripts</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">任务中进行修改就好</span></font></div></div><div><img src="day21_Gulp.html.resources/D07A4365-B910-450B-A950-0AC6CFE9FAF2.png" height="181" width="960"/><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十四、gulp-rename重命名</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">我们通过上述的操作压缩完成以后，发现，新压缩的文件直接将旧的文件给替换掉了，也就是说原来的版本没有了，我们能不能</font></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">保存没有压缩和已经压缩了的两个文件呢</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这样的话我们就需要另外一个插件</span></font></div><div><font color="#05B30B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp-rename --save-dev</span></font></div></div><div><img src="day21_Gulp.html.resources/6114035C-E357-4DC3-9EF5-BACF874F4333.png" height="23" width="960"/><br/></div><div><img src="day21_Gulp.html.resources/A79384A2-82AC-48C8-B779-876D44039436.png" height="186" width="960"/><br/></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">十五、gulp-minify-css压缩css</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上面我们看了如何压缩</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件，下面我们来看一下如何压缩</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">css</span></font></div><div><font style="color: rgb(8, 164, 12); font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sudo npm install gulp-minify-css --save-dev</span></font></div></div><div><img src="day21_Gulp.html.resources/DE5A4943-F311-4C03-B1FE-611FFDD4FC01.png" height="181" width="960"/><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></body></html>